<template>
  <el-tabs
    class="group-tabs"
    v-model="active"
    type="card"
    :stretch="false"
    tab-position="top"
    @tab-click="tabClick"
  >
    <el-tab-pane class="group-tab-pane" label="用户属性" name="attr">
      <AttributeList
        :ref="'attr'"
        :read-only="true"
        :load-attr="loadPlatformUserAttribute"
        :entry="entryUser"
        :target-id="targetId"
      />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="菜单" name="menus">
      <MenuAssignTree
        :ref="'menus'"
        :comment="'分配给平台用户的菜单信息'"
        :entry="assetEntry"
        :product="true"
      />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="权限" name="permits">
      <PermitAssignList
        :ref="'permits'"
        :entry="assetEntry"
        :product="true"
      >
        <template v-slot:comment>
          <div style="margin: 32px 0 16px 0; color: #252a2f">
            平台用户还未分配任何权限，请点击下方按钮分配权限。
          </div>
        </template>
      </PermitAssignList>
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="角色" name="roles">
      <RoleAssignList
        :ref="'roles'"
        :entry="assetEntry"
        :product="true">
        <template v-slot:comment>
          <div style="margin: 32px 0 16px 0; color: #252a2f">
            平台用户还未分配任何角色，请点击下方按钮分配角色。
          </div>
        </template>
      </RoleAssignList>
    </el-tab-pane>
    <el-tab-pane v-if="isCenter" class="group-tab-pane" label="授权平台" name="authPlats">
      <AuthPlatformList :ref="'authPlats'"
                        :entry="assetEntry" />
    </el-tab-pane>
<!--    <el-tab-pane class="group-tab-pane" label="会话" name="sessions"> </el-tab-pane>-->
  </el-tabs>
</template>

<script setup lang="ts">
import {currentNames, SERVERS, TYPES} from '@/stores/conf'
import AttributeList from '@/widget/list/AttributeList.vue'
import RoleAssignList from '@/widget/assign/RoleAssignList.vue'
import PermitAssignList from '@/widget/assign/PermitAssignList.vue'
import MenuAssignTree from "@/widget/assign/MenuAssignTree.vue";
import AuthPlatformList from '@/widget/list/AuthPlatformList.vue'

import '@/styles/tabs.css'
import {useListTabs} from "@/utils/UseListTabs";
import {computed, ref, toRaw} from "vue";
import {loadAttributeOfAsset} from "@/apis";
import {useStore} from "@/stores";

const store = useStore();

const entryUser = ref({
  name: currentNames.PLAT_USER,
  type: TYPES.USER,
  server: SERVERS.REALM
});

const assetEntry = ref({
  name: currentNames.PLAT_USER,
  type: TYPES.USER,
  server: SERVERS.ASSET
});

const targetId = computed(() => {
  const platform: any = store.getCurrentPlatform();
  return platform.realmId;
})

const isCenter = computed(() => {
  const platform: any = toRaw(store.getCurrentPlatform());

  const authCenter = 'sso_manager_platform' === platform.id;
  console.log('--- auth platform', platform, authCenter);
  return authCenter;
})

/**
 * 读取领域用户的属性，因为这是分配给平台，平台没有权限更改用户属性，只能查看
 * @param params
 */
const loadPlatformUserAttribute = async (params: any) => {
  const platform: any = store.getCurrentPlatform();

  /*
   * 注意，这里的服务类型是REALM(也就是领域服务，因为数据不在平台，而保存在领域服务)
   */
  return await loadAttributeOfAsset({
    server: SERVERS.REALM,
    targetId: platform.realmId,
    ...params
  });
}

const {active, tabClick, handleCurrent, handleSwitch} = useListTabs('attr');

defineExpose({
  handleCurrent,
  handleSwitch,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.group-tabs {
  display: flex;
  flex-direction: column;
}

.group-tabs >>> .el-tabs__header {
  padding-left: 16px;
}
</style>
